<script setup lang="ts">

const props = withDefaults(
  defineProps<{
    sWidth?: string;
    sHeight?: string;
    strokeWidth?: string;
    value: string | number;
    circleR?: string;
    textX?: string;
    textY?: string;
  }>(),
  {
    sWidth: "300",
    sHeight: "300",
    strokeWidth: "20",
    value: 0,
    circleR: '60',
    textX: "60",
    textY: '60'
  }
);

const num = ref(0)

const textDom = ref(null)
const progessDom = ref(null)
const progessDomN = ref(null)
const progessDomM = ref(null)
const progessDomQ = ref(null)





onMounted(() => {


  // var textDom = document.querySelector(".text")
  // var progessDom = document.querySelector(".progess")


  const rotatecircle = (persent) => {
    //获取svg圆形环的总长,通过获取半径长度算出总长
    let circleLength = Math.floor(2 * Math.PI * parseFloat(progessDom.value.getAttribute("r")));
    //按照百分比，算出进度环的长度
    let value = persent * circleLength / 100;
    console.log(value, 'value')
    // 做进度颜色变化使用
    // let red = 255 + parseInt((0 - 255) / 100 * persent);
    // let green = 0 + parseInt((191 - 0) / 100 * persent);
    // let blue = 0 + parseInt((255 - 0) / 100 * persent);

    //设置stroke-dasharray和路径的颜色
    progessDom.value.setAttribute("stroke-dasharray", value + ",10000");
    progessDomM.value.setAttribute("stroke-dasharray", value + 20 + ",10000");
    progessDom.value.setAttribute("stroke", `#15cc8e`);
    //设置文本内容和颜色
    textDom.value.innerHTML = persent + '%';
    textDom.value.setAttribute("fill", `#fff`)

  }
  const rotatecircleN = (persent) => {
    //获取svg圆形环的总长,通过获取半径长度算出总长
    let circleLength = Math.floor(2 * Math.PI * parseFloat(progessDomN.value.getAttribute("r")));
    //按照百分比，算出进度环的长度
    let value = persent * circleLength / 100;

    // 做进度颜色变化使用
    // let red = 255 + parseInt((0 - 255) / 100 * persent);
    // let green = 0 + parseInt((191 - 0) / 100 * persent);
    // let blue = 0 + parseInt((255 - 0) / 100 * persent);

    //设置stroke-dasharray和路径的颜色
    progessDomN.value.setAttribute("stroke-dasharray", value + ",10000");
    progessDomQ.value.setAttribute("stroke-dasharray", value + 16 + ",10000");

    progessDomN.value.setAttribute("stroke", `#18626e`);
    //设置文本内容和颜色
    // textDom.value.innerHTML = persent + '%';
    // textDom.value.setAttribute("fill", `red`)

  }

  //30毫秒变化将进度+1


  let Intervalue = setInterval(() => {
    if (props.value == 0) {
      return clearInterval(Intervalue)
    }
    num.value++
    if (num.value == props.value) {
      clearInterval(Intervalue)
    }
    rotatecircle(num.value)
    rotatecircleN(num.value)

  }, 30)


})



const boxWidth = computed(() => `${props.sWidth}px`)
const boxHeight = computed(() => `${props.sHeight}px)`)
const circleCenter = computed(() => `${Number(props.sHeight) / 2}`)



</script>

<template>
  <div class="F_box">
    <svg xmlns="http://www.w3.org/200/svg" :width="sWidth" :height="sHeight">


      <!--设置底色的圆环 stroke-linecap="round" -->
      <circle :cx="circleCenter" :cy="circleCenter" :r="circleR" fill="none" stroke='#f18d1e'
        :stroke-width="strokeWidth" />


      <circle ref="progessDomM" :transform="'rotate(-100,' + circleCenter + ',' + circleCenter + ')'" :cx="circleCenter"
        :cy="circleCenter" r="49" fill="none" stroke="#000000" :stroke-width="strokeWidth" stroke-dasharray="0,10000" />

      <!--设置进度条 stroke-linecap="round" -->
      <circle ref="progessDom" :transform="'rotate(-90,' + circleCenter + ',' + circleCenter + ')'" :cx="circleCenter"
        :cy="circleCenter" :r="circleR" fill="none" stroke="red" :stroke-width="strokeWidth"
        stroke-dasharray="0,10000" />



      <!--设置底色的圆环 stroke-linecap="round" -->
      <circle :cx="circleCenter" :cy="circleCenter" r="40" fill="none" stroke='#513e2f' stroke-width="8" />

      <circle ref="progessDomQ" :transform="'rotate(-100,' + circleCenter + ',' + circleCenter + ')'" :cx="circleCenter"
        :cy="circleCenter" r="40" fill="none" stroke="#000000" stroke-width="8" stroke-dasharray="0,10000" />
      <!--设置进度条 stroke-linecap="round" -->
      <circle ref="progessDomN" :transform="'rotate(-90,' + circleCenter + ',' + circleCenter + ')'" :cx="circleCenter"
        :cy="circleCenter" r="40" fill="none" stroke="red" stroke-width="8" stroke-dasharray="0,10000" />


      <image x="20" y="20" xlink:href="../assets/cneter.png" width="67" height="67" />

      <!-- stroke-dasharray:一个表示长度，一个表示间距 -->
      <text ref="textDom" class="text" :x="textX" :y="textY" font-size="6" fill="red">0</text>
    </svg>
  </div>
</template>

<style scoped>
.F_box {
  width: v-bind(boxWidth);
  height: v-bind(boxHeight);
}
</style>
